<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
  <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/libs/font/iconfont.css">
  <link rel="stylesheet" href="/libs/exzoom/jquery.exzoom.css">
  <link rel="stylesheet" href="/css/details.css">
</head>
<body>
  <!-- 头部 -->
  <header></header>
  <!-- 指示 -->
  <div class="shouYe">
    <div class="xing">
      <a href="">首页</a>
      <i class="glyphicon glyphicon-chevron-right"></i>
      <a href="">香水</a>
      <i class="glyphicon glyphicon-chevron-right"></i>
      <a href="">圣罗兰自由之水</a>
    </div>
  </div>

  <!-- 详情主要 -->
  <main>
    <div class="xing" id="detail_list">
      
    </div>
    <script type="text/html" id="detail_list_template">
      <div class="exzoom" id="exzoom">
        <!--大图区域-->
        <div class="exzoom_img_box">
            <ul class='exzoom_img_ul'>
              {{each photo img}}
                <li><img src="{{img.url}}"/></li>
              {{/each}}
            </ul>
        </div>
        <!--缩略图导航-->
        <div class="exzoom_nav"></div>
        <!--控制按钮-->
        <p class="exzoom_btn">
            <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
            <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
        </p>
      </div>
      

      <!-- 右边文字和选项 -->
      <div class="text">
        <p class="p1">LIBRE EAU DE PARFUM</p>
        <p class="p2">{{title}}</p>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <i class="glyphicon glyphicon-star"></i>
        <a href="" class="pl">2条评论</a>
        <p class="p3">首款腹鳍花香</p>
        <p class="p3">型号{{id}}</p>
        <p class="p3">橙花、柑橘、明媚澄澈 耀目洒脱</p>
        <a href="" class="ckc">查看详情</a>
        <!-- 毫升按钮 -->
        <div class="btn-group btn-group-justified" role="group">
          <div class="btn-group" >
            <button type="button" class="btn btn-default">原价<br>￥{{originPrice}}</button>
          </div>
          <div class="btn-group" >
            <button type="button" class="btn btn-default">现价<br>￥{{price}}</button>
          </div>
        </div>
        <!-- 计数器和加入购物车 -->
        <div class="wrop">
          <!-- <div class="count">
            <button class="jian">_</button>
            <input type="text" class="shuRu">
            <button class="add">+</button>
          </div> -->
          <button class="cart" id="addToCart">加入购物车<i class="glyphicon glyphicon-shopping-cart"></i></button>
        </div>
      </div>
      <!-- 后面图片部分 -->
      <div class="cpxq">
        <p>产品详情</p>
      </div>
      
      <!-- 图片部分 -->
      <div class="bigImgContent">
        {{each descContentList bigImg}}
            {{if bigImg.type === 1}}
                <img src="{{bigImg.image.url}}" alt="" class="bigimg">
            {{else}}
                <p>{{bigImg.text}}</p>
            {{/if}}
        {{/each}}
      </div>
    </script>
  </main>

  

  <!-- 尾部 -->
  <footer></footer>

  <a href="/html/shoppingCart.html">
  <div id="cart1" class="cart1">
    <span>0</span>
  </div>
  </a>
  <!-- 引入JS模块 -->
  <script src="/libs/require/require.min.js" data-main="/js/details"></script>
</body>
</html>